<template>
  <div class="progress-gantt-container">
    <el-row type="flex" justify="start" align="middle">
      <el-col :sm="12" :lg="7" :xl="5">
        <span class="select-label">时间轴：</span>
        <el-select v-model="scalesType" placeholder="请选择">
          <el-option v-for="item in codeModel.ganttScalesTypeList" :key="item.id" :label="item.name" :value="item.code"> </el-option>
        </el-select>
      </el-col>
      <el-col class="status-square" style="background-color: #d80a1e;"> </el-col>
      <el-col class="projectStateContext" :offset="0"> 项目超期 </el-col>
      <el-col class="status-square" style="background-color: #ff8c2e;"> </el-col>
      <el-col class="projectStateContext" :offset="0"> 里程碑超期 </el-col>
      <el-col class="status-square" style="background-color: #fad232;"> </el-col>
      <el-col class="projectStateContext" :offset="0"> 任务超期 </el-col>
    </el-row>
    <gantt class="progress-gantt" ref="progress_gantt" :height="ganttHeight" :taskData="tasks" :scalesType="scalesType" @onTaskClick="showEditPage"></gantt>
    <tl-task ref="tlTask" :projectinfo="projectinfo"></tl-task>
    <tl-milepost ref="tlMilepost" :projectinfo="projectinfo"></tl-milepost>
  </div>
</template>

<script>
/** 子组件 */
import gantt from './components/gantt'
import tlTask from '@/views/gpm/gpmProjectTask/edit'
import tlMilepost from '@/views/gpm/gpmProjectMilepost/edit'
/** 工具 */
import { getAction } from '@tapui/utils/http'

export default {
  name: 'progressGantt',
  components: { gantt, tlTask, tlMilepost },
  props: {
    projectId: {
      type: Number,
      default: 0
    },
    projectinfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      url: {
        getGanttInfo: '/sd/gantt/getGanttInfoByProjectId',
        queryCodeList: '/sd/gantt/dataCodeList'
      },
      tasks: {
        /* data: [
          {
            text: '项目', // 任务名
            start_date: '2017-04-20', // 开始时间
            end_date: '2017-04-22', // 开始时间
            abnormalState: 30, // 项目异常状态编码
            id: 1, // 任务id
            duration: 1, // 任务时长，从start_date开始计算
            progress: 0.6, // 任务完成情况，进度
            parent: 2, // 父任务ID
            user: '李四', // 成员
            plan_end_date: '2017-04-19', // 计划开始时间
            plan_start_date: '2017-04-20', // 计划结束时间
            show: false,
            open: true, // 默认是否打开
            isOverdue: true, // 是否超期
            task_state: '2', // 任务状态
            type: gantt.config.types.project // gantt.config.types.milestone为里程碑类型，project为项目任务类型，也就是摘要任务，task为普通任务类型
          },
          { id: 2, text: '里程碑', start_date: '2017-04-15', duration: 3, parent: 1, progress: 0.6, type: gantt.config.types.milestone },
          { id: 3, text: '任务1', start_date: '2017-04-18', duration: 3, parent: 2, progress: 0.4, type: 'overdue_task' },
          { id: 4, text: '任务2', start_date: '2017-04-22', duration: 8, parent: 2, progress: 0.4 }
        ],
        links: [
          // links为任务之间连接的线
          // source根源 target目标 从根源指向目标
          // type:'0'是从1任务完成到2任务开始，type:'1'是1任务开始到2任务开始，type:'2'是从1任务完成到2任务完成，type:'3'是从1任务开始到2任务完成
          { id: 1, source: 2, target: 3, type: '0' },
          { id: 2, source: 3, target: 4, type: '0' }
        ] */
      },
      codeModel: {},
      scalesType: undefined,
      ganttHeight: ''
    }
  },
  computed: {
    // 项目id，由父组件或路由传递
    qry_projectId() {
      return this.projectId || this.$route.query.projectId
    },
    // 减去的高度
    reduceHeight() {
      return this.$route.query.projectId ? 70 : 300
    }
  },
  methods: {
    /** 查询编码 */
    doQueryCode() {
      if (this.url.queryCodeList) {
        getAction(this.url.queryCodeList, {}).then((res) => {
          if (res.success) {
            this.codeModel = res.result
            // 初始化
            this.assignDefaultValue()
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
      }
    },
    /** 初始化 */
    assignDefaultValue() {
      this.scalesType = 'month'
    },
    /** 查询甘特图数据 */
    getGanttData() {
      this.tasks = {}
      getAction(this.url.getGanttInfo, { projectId: this.qry_projectId }).then((res) => {
        if (res.success) {
          this.tasks = res.result
          // this.tasks.data = this.tasks.data.map((current, ind, array) => {
          //   let newObj = {}
          //   if (current.type === 'project' && current.abnormalState === 1) { // 任务超期
          //     newObj = Object.assign({}, current, { 'color': '#FAD232', 'progressColor': 'blue' })
          //   } else if (current.type === 'project' && current.abnormalState === 2) { // 里程碑超期
          //     newObj = Object.assign({}, current, { 'color': '#FF8C2E' })
          //   } else if (current.type === 'project' && current.abnormalState === 3) { // 项目超期
          //     newObj = Object.assign({}, current, { 'color': '#D80A1E', 'progressColor': 'rgb(255, 89, 86)' })
          //   } else {
          //     newObj = current
          //   }
          //   return newObj
          // })
          this.$nextTick(() => {
            this.$refs['progress_gantt'].drawerGantt()
          })
        } else {
          this.$tap.message(res.message, 'warning')
        }
      })
    },
    /** 计算高度 */
    chargeHeight() {
      this.ganttHeight = document.body.getBoundingClientRect().height - this.reduceHeight + 'px'
    },
    /** 显示编辑页 */
    showEditPage(id, event) {
      const typeMap = {
        M: 'tlMilepost',
        T: 'tlTask'
      }
      const refKey = typeMap[id.substring(id.length - 1)]
      if (refKey) {
        this.$refs[refKey].id = id.substring(0, id.length - 1)
        this.$refs[refKey].isAdd = false
        this.$refs[refKey].visible = true
        this.$refs[refKey].disableEditSubmit = true
      }
    },
    /** 打开全屏查看页面 */
    openFullScreenPage() {
      let { href } = this.$router.resolve({
        path: '/progressGanttFullScreen',
        query: {
          projectId: this.projectId
        }
      })
      if (this.$store.getters.inMicro) {
        const appName = this.$store.getters.microAppName
        let urlFix = this.$store.getters.microAppList.find((v) => v.name === appName).entry
        if (urlFix.endsWith('/')) {
          urlFix = urlFix.substring(0, urlFix.length - 1)
        }
        href = urlFix + href.substring(appName.length + 1)
      }
      window.open(href, this.$store.getters.token)
    }
  },
  created() {
    // 携带token
    if (this.$route.query.projectId) {
      this.$store.dispatch('Token', window.name)
    }
    this.doQueryCode()
  },
  mounted() {
    this.chargeHeight()
    this.getGanttData()
    // 添加高度监听事件
    window.addEventListener('resize', this.chargeHeight)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.chargeHeight)
    })
  }
}
</script>

<style lang="scss" scoped>
.progress-gantt-container {
  padding: 16px 0 0 12px;
  .select-label {
    color: #606266;
  }
  .status-square {
    height: 20px;
    width: 30px;
  }
  .progress-gantt {
    margin: 10px 12px 12px 0;
  }
}
</style>
